<template>
	<view class="energy-save-container">
		<view class="title">
			<view class="left-title">节能减排</view>
			<view class="btn">
				<uv-subsection :list="list" mode="button" :current="current" @change="change" activeColor="#3c9cfe"
					bgColor="#ffffff"></uv-subsection>

			</view>
		</view>
		<view class="content">
			<view class="content-item" v-for="item in energyList" :key="item.id">
				<img class="cus-img" src="@/static/images/emergySave/energySaving-save.svg" />

				<view class="title">{{item.name}}</view>
				<!-- 	{{item.value}} -->
				<view class="value"> {{formatUnit(item)}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted
	} from "vue";

	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		reqEnergySaving
	} from "@/api/model/photovoltaic"
	defineOptions({
		name: "energy"
	})
	const props = defineProps({
		parkId: {
			type: String,
		}
	})

	const current = ref(0)
	const list = ref(['当月', '当年', '总'])
	const energyList = ref([{
			id: 1,
			name: '节约标准煤',
		},
		{
			id: 2,
			name: '减少二氧化碳',
		},
		{
			id: 3,
			name: '等效植树',
		},
	])

	const change = (index) => {
		current.value = index
		const map = new Map()
		map.set(0, 'month')
		map.set(1, 'year')
		map.set(2, 'total')

		getData(map.get(index))
	}
	const getData = async (val) => {
		//映射关系
		const mapping = {
			'节约标准煤': 'coal',
			'减少二氧化碳': 'carbondioxide',
			'等效植树': 'treeplanting',
		}
		let {
			data
		} = await reqEnergySaving(val)

		let result = energyList.value.map(item => ({
			...item,
			value: data.data[mapping[item.name]] || 0
		}))
		energyList.value = result
	}
	//格式化单位
	const formatUnit = (val) => {
		// console.log("格式化单位", val)

		const mapping = new Map()
		mapping.set(1, "吨")
		mapping.set(2, "吨")
		mapping.set(3, "棵")

		let num = val.value
		if (num >= 10000) {
			return `${(num / 10000).toFixed(2)} 万${mapping.get(val.id)} `; // 超过一万，转换为万单位，保留两位小数
		} else if (num >= 1000) {
			return `${(num / 1000).toFixed(2)} 千${mapping.get(val.id)}`; // 超过一千，转换为千单位，保留两位小数
		} else {
			return `${num} ${mapping.get(val.id)}`; // 小于一千，保持原单位
		}
	}
	onMounted(() => {
		console.log("mounted===")
		getData('month')
	})

	onShow(() => {

	})
	watch(() => props.parkId, (val) => {

		setTimeout(() => {
			getData('month')
		}, 400)

	})
</script>

<style lang="scss" scoped>
	.energy-save-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-title {
				height: 76rpx;
				margin-left: 46rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 76rpx;
			}

			.btn {
				margin-right: 30rpx;

				::v-deep {
					.uv-subsection__item {
						flex: initial !important;
						/* 使用 !important 强制覆盖组件库的默认样式 */
						width: 70rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
					}

					.uv-subsection__item:nth-child(1) {
						color: red !important;
					}
				}
			}

		}

		.content {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;

			.content-item {
				width: 230rpx;
				// height: 180rpx;
				margin-top: 20rpx;
				margin-left: 12rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;

				.cus-img {
					width: 130rpx;
					height: 130rpx;
				}

				.title {
					justify-content: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;

				}

				.value {
					font-size: 36rpx;
					vertical-align: top;
					font-family: DINAlternateBold;
					font-weight: bold;
					color: #222222;
				}
			}
		}
	}
</style>